<section class="wsl-page-tab" id="wsl-suite-tab-cases">
  <div
    class="wsl-min-h-screen-3 grid place-items-stretch gap-4 space-y-4 md:space-y-0 lg:grid-cols-2 xl:grid-cols-3">
    <div class="wsl-box col-span-1 space-y-4 p-4 xl:col-span-2">
      <app-home-list-filter
        [manager]="filterManager"
        [params]="filterParams()"
        [stats]="filterStats()"
        (updateList)="updateList($event)" />
      <div *ngIf="countShownRows('element')">
        <div class="wsl-list-head">
          <p *ngIf="countShownRows('element') !== countRows('element')">
            You are viewing
            <b>
              {{
                countShownRows('element')
                  | i18nPlural : { '=0': 'none', '=1': 'one', other: '#' }
              }}
            </b>
            of {{ countRows('element') }} test cases.
          </p>
        </div>
        <ul class="wsl-list-body">
          <li
            class="wsl-list-item-outer"
            *ngFor="let item of getShownRows('element'); let i = index"
            (click)="selectedRow = i"
            [ngClass]="
              selectedRow === i
                ? 'border-l-sky-200 dark:border-l-sky-700'
                : 'border-l-transparent'
            ">
            <app-suite-item-case
              [item]="item"
              (updateMetadata)="updateMetadata($event)" />
          </li>
        </ul>
      </div>
      <app-home-list-pager
        [params]="pagerParams()"
        [stats]="filterStats()"
        (updateList)="updateList($event)" />
    </div>
    <div class="flex flex-col space-y-4">
      <div
        class="wsl-box divide-y divide-gray-200 px-4 py-2 dark:divide-gray-700">
        <div class="flex h-8 items-center space-x-2">
          <h3 class="font-semibold text-black dark:text-gray-300">Overview</h3>
        </div>
        <p class="py-4 text-sm text-black dark:text-gray-300">
          As you submit more data, this section will be populated with insights
          about your test cases.
        </p>
      </div>
    </div>
  </div>
</section>
